<template>


  <nut-config-provider :theme="theme" :theme-vars="themeVars">

    <view :style="{backgroundColor: themeVars.pageBackgroundColor,padding: themeVars.pagePadding,height: '100vh'}">

      <Publish v-if="data.length >0" :data="item" @sureDelete="sureDeleteHandle"
               @click="Taro.navigateTo({url:'/pages/view/publishInfo/index?id='+item.id})"
               @edit="edit"
               @rejectReason="clickReason"
               @audit="clickAudit"
               v-for="item in data"/>

      <nut-empty v-else :image="emptyUrl()" :image-size="100" description="暂无数据"/>

      <view style="display: flex;" v-if="loadMoreLoading">
        <IconFont name="loading"></IconFont>
      </view>


      <view class="fixed-bottom">
        <nut-button type="primary" style="width: 200px" @click="Taro.navigateTo({url:'/pages/view/publishForm/index'})">
          我要发布
        </nut-button>
      </view>
    </view>

    <nut-dialog :title="deleteDialog.title" :content="deleteDialog.content" v-model:visible="deleteDialog.visible"
                @ok="deleteHandle(deleteDialog.id)"/>

    <nut-dialog :title="auditDialog.title" :content="auditDialog.content" v-model:visible="auditDialog.visible"
                @ok="sureAuditHandle(auditDialog.id)"/>

    <nut-dialog
        no-cancel-btn
        title="驳回原因"
        :content="rejectReasonDialog.content"
        v-model:visible="rejectReasonDialog.visible"
        no-ok-btn
        style="z-index: 500"

    />

  </nut-config-provider>
</template>

<script>
import {onMounted, ref} from 'vue';
import {IconFont} from '@nutui/icons-vue'
import useTheme from "../../../hooks/useTheme";
import Taro from "@tarojs/taro";
import Publish from "../../../components/publish/index.vue";
import {twPublishAudit, twPublishDelete, twPublishMyPage} from "../../../api/publish";
import {getDictList} from "../../../utils/dictUtils";
import {emptyUrl} from "../../../utils/imgUtils";
import {twProductAudit} from "../../../api/product";

const {theme, themeVars} = useTheme()
const data = ref([]);

const queryParam = ref({current: 1, size: 10, pages: 0})
const getTwPublishMyPage = () => {
  twPublishMyPage({...queryParam.value, sortField: 'createTime', sortOrder: "descend"}).then(res => {

    if (200 == res.code) {
      data.value = [...data.value, ...res.data.records]
      queryParam.value.pages = res.data.pages;
      console.log("queryParam", queryParam.value)
      console.log("res.data", res.data)
    }
  }).finally(() => {
    Taro.stopPullDownRefresh();
    loadMoreLoading.value = false

  })
}


const refresh = () => {
  queryParam.value = {current: 1, size: 10,}
  data.value = []
  getTwPublishMyPage()
}

const loadMoreLoading = ref(false);
const loadMore = () => {
  if (queryParam.value.current >= queryParam.value.pages) {
    console.log("没有更多数据了")
    Taro.showToast({title: "没有更多数据了", icon: 'none', duration: 1500,});
    return
  }
  loadMoreLoading.value = true
  queryParam.value.current = queryParam.value.current + 1
  getTwPublishMyPage()
}


/**
 * 删除
 * @type {Ref<UnwrapRef<boolean>>}
 */
const deleteDialogVisible = ref(false)
const deleteHandle = (id) => {
  console.log("删除", id)
  twPublishDelete(id).then(res => {
    if (200 === res.code) {
      refresh()
    }
  }).finally(()=>{
    Taro.hideLoading();
  })
}


const deleteDialog = ref({
  visible: false,
  title: '是否确认删除?',
  content: '',
  id: ''
})
const sureDeleteHandle = (e) => {
  console.log("确认删除", e)
  deleteDialog.value.visible = true;
  deleteDialog.value.content = e.name;
  deleteDialog.value.id = e.id
}

const edit = (data) => {
  console.log("edit", data)
  Taro.navigateTo({url:'/pages/view/publishForm/index?id='+data.id})
}




const rejectReasonDialog = ref({
  visible: false,
  title: "",
  content: '',

})

const clickReason = (data) => {
  console.log(data)
  rejectReasonDialog.value.visible = true;
  rejectReasonDialog.value.title = data.name;
  rejectReasonDialog.value.content = data.rejectReason;
}




const auditDialog = ref({
  visible: false,
  title: '是否确认提交审核?',
  content: '',
  id: ''
})
const clickAudit = (e) => {
  auditDialog.value.visible = true;
  auditDialog.value.content = e.name;
  auditDialog.value.id = e.id
}

const sureAuditHandle = (id) => {
  console.log("确认提交审核", id)
  Taro.showLoading({
    title: '审核中',
  })
  twPublishAudit({id: id}).then(res => {
    console.log("替身结果", res)
    if (200 == res.code) {
      Taro.showToast({title:  res.msg, icon: 'none', duration: 1500,});
      refresh()
    }
  }).finally(()=>{
    Taro.hideLoading()
  })


}
export default {
  methods: {
    emptyUrl() {
      return emptyUrl
    }
  },
  components: {IconFont},

  // 可以使用所有的 Vue 生命周期方法
  mounted() {
  },

  onLoad() {
  },

  onReady() {
  },

  onShow() {
    refresh()
  },

  onHide() {
  },

  onPullDownRefresh() {
    console.log("onPullDownRefresh")
    refresh()
  },
  onReachBottom() {
    console.log("onReachBottom")
    loadMore()
  },


  setup() {


    return {
      theme,
      themeVars,
      data,
      getTwPublishMyPage,
      Taro,
      loadMoreLoading,
      deleteDialogVisible,
      sureDeleteHandle,
      deleteDialog,
      deleteHandle,
      edit,
      rejectReasonDialog,
      clickReason,
      auditDialog,
      clickAudit,
      sureAuditHandle

    }
  }

}


</script>

<style>
.fixed-bottom {
  position: fixed;
  bottom: 30px;
  left: 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

</style>